<template>
  <view class="hotspot">
    <view class="custom-navbar">
      <view class="nav-content">
        <view class="back-btn" @click="goBack">
          <i class="iconfont icon-left text-bold"></i>
        </view>
        <text class="title">{{ showTitle ? pageTitle : '' }}</text>
        <view class="right-btn" @click="goBack">
          <i class="iconfont icon-home text-bold"></i>
        </view>
      </view>
    </view>
    <view style="padding-top: 88rpx">
      <view class="hotspot-title flex-y-center pd-lg">
        <view class="f-sm-title hotspot-icon radius flex-center pd-sm">#</view>
        <view class="f-md-title text-bold ml-md">
          {{ pageTitle }}
        </view>
      </view>
      <view class="peo-join flex-y-center pl-lg pr-lg pb-lg">
        <view>{{ peoNumJoin }}</view>
        <view>+人已参与</view>
      </view>
    </view>
    <wfalls-flow :list="list.data" :path="1" ref="dynamic_wfalls" v-if="list.data.length > 0"></wfalls-flow>
        <load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading">
        </load-more>
        <block v-if="!loading&&list.data.length<=0&&list.current_page==1">
          <!-- #ifdef H5 -->
          <abnor v-if="location.lat&&location.lng"
                 :percent="`calc(100vh - 244rpx - calc(98rpx + env(safe-area-inset-bottom) / 2))`">
          </abnor>
          <!-- #endif -->
          <!-- #ifndef H5 -->
          <abnor v-if="location.lat&&location.lng"
                 :percent="`calc(100vh - 420rpx - calc(98rpx + env(safe-area-inset-bottom) / 2))`">
          </abnor>
		  <!-- #endif -->
        </block>
  </view>
</template>

<script>
import wfallsFlow from "@/components/wfalls-flow.vue"

export default {
  components: {
    wfallsFlow
  },
  data() {
    return {
      statusBarHeight: 0,
      pageTitle: '',
      showTitle: false,
      list: {
        data: []
      },
      peoNumJoin: 0,
      topicParams: {},
      loading: true
    }
  },
  onLoad(options) {
    if (options.data) {
      this.topicParams = JSON.parse(decodeURIComponent(options.data));
      const sysInfo = uni.getSystemInfoSync();
      console.log('sysInfo', sysInfo)
      this.statusBarHeight = sysInfo.statusBarHeight || 20;
      this.pageTitle = this.topicParams.topicName || '';
      this.getHotTopic()
    }
  },
  onPageScroll(e) {
    this.showTitle = e.scrollTop > 50;
  },

  async onReachBottom() {
    if (this.list.current_page >= this.list.last_page || this.loading) return;
    this.param.page = this.param.page + 1;
    this.loading = true;
    await this.getHotTopic();
    setTimeout(() => {
      this.$refs.dynamic_wfalls.handleViewRender();
    }, 0)
  },
  methods: {
    async getHotTopic() {
      let {
        lat = 0, lng = 0
      } = this.location
      let param = {
        ...this.topicParams,
        ...this.param,
        lat,
        lng
      }
      let list = await this.$api.usernew.getHotTopicCont(param)
      this.list = list
      this.loading = false
    },
    goBack() {
      this.$util.goUrl({
        url: '/pages/dynamic',
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.hotspot {
  background: #FFFFFF;
}
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.nav-content {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
}

.back-btn {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.right-btn {
  font-size: 40rpx;
}

.hotspot-title {
  .hotspot-icon {
    background: rgb(28, 128, 10);
    height: 50rpx;
    width: 50rpx;
    color: #FFFFFF;
    font-weight: 500;
  }
}

.peo-join {
  color: #909095;
}
</style>
